<template>
  <view>
    <cu-custom bgColor="bg-gradual-grays" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">体测对比报告</block>
    </cu-custom>
    <view style="padding: 0 30rpx;">
      <!-- 用户信息 头像等 -->
      <view class="items u-f-ajc u-f-column">
        <view class="avatars u-f-ajc text-overflow">罗兰</view>
        <view style="margin: 20rpx 0 30rpx;font-size: 24rpx;">罗兰</view>
        <view>2018-08-29<text style="margin: 0 10rpx;font-size: 24rpx;">VS</text>2018-09-19</view>
      </view>
      <!-- 用户数据 -->
      <view class="cards">
        <view class="titles">变化数据</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .bg-gradual-grays {
    background-color: #3B4257;
    color: #FFFFFF;
  }

  .items {
    width: 100%;
    margin: 50rpx 0;
    color: #FFFFFF;

    .avatars {
      width: 100rpx;
      height: 100rpx;
      background-color: $uni-color-zhuti;
      color: #FFFFFF;
      border-radius: 100%;
    }
  }

  .cards {
    width: 100%;
    height: 200rpx;
    background-color: #414451;
    border-radius: 20rpx;
    padding: 30rpx;

    .titles {
      color: #FFFFFF;
      margin-bottom: 30rpx;
    }

    .titles::before {
      content: '';
      display: inline-block;
      width: 8rpx;
      height: 24rpx;
      background-color: #39BB9E;
      margin-right: 20rpx;
    }
  }
</style>
